<template>
    <div
        class="mptransqry"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="分期付款交易明细查询">
            <template slot="cardBody">
                <!-- 搜索表单模块 -->
                <el-form
                    class="searchForm"
                    ref="searchForm"
                    :model="searchForm"
                    :rules="rules"
                    :inline="true"
                    label-position="right"
                    size="small"
                    label-width="100px"
                >
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="账户类别:" class="text_fl">
                                <el-select
                                    v-model="searchForm.accttype"
                                    placeholder="请选择账户类别"
                                    clearable
                                    @change="changeCardList"
                                >
                                    <el-option
                                        v-for="item in AccountionTYPE_INFO"
                                        :label="item.label"
                                        :value="item.code"
                                        :key="item.label"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="卡号:" class="text_fl">
                                <el-select
                                    v-model="searchForm.cardno"
                                    placeholder="请选择卡号"
                                    clearable
                                >
                                    <el-option
                                        v-for="item in cardList"
                                        :label="item.CARDNBR"
                                        :value="item.CARDNBR"
                                        :key="item.CARDNBR"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="分期类型:" label-position="left" prop="mpType">
                                <el-select placeholder="请选择" v-model="searchForm.mpType" clearable>
                                    <el-option
                                        v-for="(item, index) in mptypeList"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="查询类型:" label-position="left" prop="opercode">
                                <el-select
                                    placeholder="请选择"
                                    v-model="searchForm.opercode"
                                    clearable
                                >
                                    <el-option
                                        v-for="(item, index) in opercodeList"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label-position="left" prop="startDate" label="起始日期:">
                                <el-date-picker
                                    v-model="searchForm.startDate"
                                    type="date"
                                    placeholder="请选择起始日期"
                                    value-format="yyyyMMdd"
                                    format="yyyy-MM-dd"
                                    :picker-options="startOptions"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="endDate" label-position="left" label="结束日期:">
                                <el-date-picker
                                    v-model="searchForm.endDate"
                                    type="date"
                                    placeholder="请选择结束日期"
                                    value-format="yyyyMMdd"
                                    format="yyyy-MM-dd"
                                    :picker-options="endtOptions"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="text-align:center; margin-bottom: 30px;">
                        <el-col :span="24">
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-search"
                                @click="handleGetListAll('first')"
                            >查 询</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-refresh-right"
                                @click="handleReset"
                            >重 置</el-button>
                        </el-col>
                    </el-row>
                </el-form>

                <!-- 表格数据展示模块    @row-click="handleSelectRow" -->

                <el-table
                    v-show="isShowView"
                    :data="tableData"
                    border
                    stripe
                    header-row-class-name="headerRow"
                    ref="showListTable"
                    class="heard-bg business_table tabscrollBody"
                    @row-click="Fun"
                >
                    <el-table-column label="交易日期">
                        <template slot-scope="scope">{{scope.row.BEGYM}}</template>
                    </el-table-column>
                    <el-table-column label="交易描述">
                        <template slot-scope="scope">{{scope.row.DESC1}}</template>
                    </el-table-column>

                    <el-table-column label="分期状态">
                        <template
                            slot-scope="scope"
                        >{{scope.row.STATUS | filterSTATUS(mpstatusList)}}</template>
                    </el-table-column>
                    <el-table-column label="分期类型">
                        <template slot-scope="scope">{{scope.row.MPTYPE | filterMPTYPE(mptypeList)}}</template>
                    </el-table-column>

                    <el-table-column label="分期金额">
                        <template slot-scope="scope">{{scope.row.MPAMT}}</template>
                    </el-table-column>
                    <el-table-column label="手续费总额">
                        <template slot-scope="scope">{{scope.row.FEEAMT}}</template>
                    </el-table-column>
                    <el-table-column label="手续费费率">
                        <template slot-scope="scope">{{scope.row.PRODID | getRate1(mprateList)}}</template>
                    </el-table-column>
                    <el-table-column label="手续费分摊方式">
                        <template slot-scope="scope">{{scope.row.PRODID | getFeeType1(mprateList)}}</template>
                    </el-table-column>
                    <el-table-column label="每月本金">
                        <template slot-scope="scope">{{scope.row.MPINSTAL}}</template>
                    </el-table-column>
                    <!-- <el-table-column label="期数" min-width="50">
                        <template slot-scope="scope">{{scope.row.MPMTHS}}</template>
                    </el-table-column>-->
                    <el-table-column label="已分摊情况">
                        <el-table-column label="本金">
                            <template
                                slot-scope="scope"
                            >{{scope.row.MPAMT|getPayBPL(scope.row.REMPBAL)}}</template>
                        </el-table-column>
                        <el-table-column label="手续费">
                            <template
                                slot-scope="scope"
                            >{{scope.row.FEEAMT|getPayTotFee(scope.row.REMFEE)}}</template>
                        </el-table-column>
                        <el-table-column label="次数">
                            <template slot-scope="scope">{{scope.row.INSTCNT}}</template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="剩余未分摊情况">
                        <el-table-column label="本金">
                            <template slot-scope="scope">{{scope.row.REMPBAL}}</template>
                        </el-table-column>
                        <el-table-column label="手续费">
                            <template slot-scope="scope">{{scope.row.REMFEE}}</template>
                        </el-table-column>
                        <el-table-column label="次数">
                            <template slot-scope="scope">{{scope.row.PPLMTHS }}</template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="分期到期日" prop="DUEDATE">
                        <template slot-scope="scope">{{scope.row.DUEDATE }}</template>
                    </el-table-column>
                    <el-table-column label="卡号">
                        <template slot-scope="scope">{{scope.row.CARDNBR | getFormatCard}}</template>
                    </el-table-column>
                </el-table>
                <el-table :data="remainData" border v-show="isShowView">
                    <el-table-column prop="mptype"></el-table-column>

                    <el-table-column prop="remainamttotal" label="剩余未摊销本金汇总"></el-table-column>

                    <el-table-column prop="remainfeetotal" label="剩余未摊销手续费汇总"></el-table-column>

                    <el-table-column
                        prop="remaintotal"
                        label="分期付款剩余未摊销金额=剩余未摊销本金+剩余未摊销手续费"
                        min-width="300"
                    ></el-table-column>
                </el-table>
                <div class="footer" v-show="isShowView">
                    <el-button type="primary" size="small" @click="repay('O')">转账分期提前还款</el-button>
                    <el-button type="primary" size="small" @click="repay('W')">按日分期提前还款</el-button>
                    <!-- <el-button
                        type="primary"
                        size="small"
                        @click="handleChangePage('pre')"
                        :disabled="currentPageIndex <= 0"
                    >上一页</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleChangePage('next')"
                        :disabled="!nextButtonFlag"
                    >下一页</el-button>-->
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import moment from 'moment';
import { mapState } from 'vuex';
import { trimString, getDictSelectList } from '@/utils/Common';
import { LOANSTATUS_DAILYBASIS } from '@/utils/Contants';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    name: 'mptransqry',
    components: {
        cardComponent,
    },
    data() {
        return {
            pageLoading: false, // 页面loading
            nextButtonFlag: false, // 下翻页按钮 显示控制阀

            searchForm: { // 搜索表单字段
                startDate: '20000101', // 开始日期 默认为当前日期往前一个月
                endDate: moment(new Date()).format('YYYYMMDD'), // 结束日期 默认为当前日期
                accttype: '',
                cardno: '',
                opercode: '',
                mpType: '',
            },
            mptypeList: [],
            opercodeList: [],
            mpstatusList: [],
            cardList: [],
            tableData: [],
            // mptypeValue: '',
            rules: { // 表单校验规则
                startDate: [
                    { required: true, message: '请选择起始日期', trigger: 'blur' },
                ],
                endDate: [
                    { required: true, message: '请选择结束日期', trigger: 'blur' },
                ],
            },
            startOptions: { // 开始日期选择 限制
                disabledDate: (time) => {
                    if (this.searchForm.endDate) {
                        return time.getTime() > new Date(moment(this.searchForm.endDate).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
            endtOptions: { // 结束日期选择限制
                disabledDate: (time) => {
                    if (this.searchForm.startDate) {
                        return time.getTime() < new Date(moment(this.searchForm.startDate).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
            currentSelectRow: '', //
            currentRowData: '', // 当前选择行的数据
            trialData: {}, // 试算结果数据
            isShowTrialDialog: false, // 试算结果展示弹框
            pagingDataList: [], // 翻页上送字段列表
            currentPageIndex: 0, // 当前页
            mpMonthList: [],
            mprateList: [],
            showremainListTable: false,//是否展示汇总信息
            ifFinishtot: false,//是否完成汇总计算标志，防止翻页时重复统计
            othremainamttotal: '0', //剩余其他分期未摊销本金总和
            othremainfeetotal: '0', //剩余其他分期未摊销手续费总和

            dayremainamttotal: '0',//剩余按日分期未摊销本金总和
            dayremainfeetotal: '0',//剩余按日分期未摊销手续费总和

            //汇总信息
            remainData: [{
                mptype: '',
                remainamttotal: '',
                remainfeetotal: '',
                remaintotal: ''
            }],
            resultlist: [],
            isShowView: false,
            RtnindFlag: '',
        };
    },


    // 取缓存信息
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
        AccountionTYPE_INFO: state => state.common.AccountionTYPE_INFO, //账户类别列表
        cardList_3601: state => state.common.cardList_3601, //卡列表
    }),

    filters: {
        // 状态 转译
        getStatusText(val) {
            let text = '';
            LOANSTATUS_DAILYBASIS.forEach((item) => {
                if (item.value === trimString(val)) {
                    text = item.label;
                }
            });
            return text;
        },
        // 取卡号后四位
        getFormatCard(val) {
            let card4end = ''
            card4end = val.trim()
            card4end = card4end.substring(card4end.length - 4)
            return card4end
        },
        // 格式化金额
        getFormatAmt(val) {
            let card4end = ''
            card4end = val.trim()
            card4end = card4end.substring(card4end.length - 4)
            return card4end
        },
        // 日期格式化
        getDateFormat(val) {
            if (val) {
                return moment(`${val}`).format('YYYY-MM-DD');
            }
            return '--';
        },
        filterSTATUS: (value, mpstatusList) => {
            value = (`${value}`).trim();
            for (let index = 0; index < mpstatusList.length; index++) {
                const element = mpstatusList[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
        filterMPTYPE: (value, mptypeList) => {
            value = (`${value}`).trim();
            for (let index = 0; index < mptypeList.length; index++) {
                const element = mptypeList[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },

        getRate(plan, mthnum, mpMthList) {//获取分期费率
            let rate = '';

            for (let index = 0; index < mpMthList.length; index++) {
                const element = mpMthList[index];

                if (element.label === plan + '') {
                    let ary = element.code.split(',');
                    ary.forEach((item1, index1) => {
                        const itemArray = item1.split('-');
                        if (itemArray[0] === mthnum + '') {
                            rate = itemArray[1];
                        }
                    });
                }
            }

            return rate;
        },
        getFeeType(plan, mthnum, mpMthList) {
            let feetype = '';

            for (let index = 0; index < mpMthList.length; index++) {
                const element = mpMthList[index];

                if (element.label === plan + '') {
                    let ary = element.code.split(',');
                    ary.forEach((item1, index1) => {
                        const itemArray = item1.split('-');
                        if (itemArray[0] === mthnum + '') {
                            feetype = itemArray[2] === '0' ? '一次性收取' : '分期收取';
                        }
                    });
                }
            }


            return feetype;
        },
        getRate1(prodid, mprateList) {//获取分期费率
            let rate = '';
            mprateList.some(item => {
                if (item.code === (prodid.trim())) {
                    let ary = item.label.split('-');
                    rate = ary[0] + '%';
                    return true;
                }
            });
            return rate;
        },
        getFeeType1(prodid, mprateList) {
            let feetype = '';
            mprateList.some(item => {
                if (item.code === (prodid.trim())) {
                    let ary = item.label.split('-');
                    feetype = ary[1] === '0' ? '一次性收取' : '分期收取';
                    return true;
                }
            });
            console.log('feetype', feetype);
            return feetype;
        },

        //计算已分摊手续费
        getPayTotFee(allfee, unpayfee) {
            let payedfee = '';
            payedfee = parseFloat(allfee) - parseFloat(unpayfee);
            payedfee = parseFloat(payedfee).toFixed(2);
            return payedfee;
        },

        //计算已摊销本金
        getPayBPL(amt, unpay) {
            let payedbal = '';
            payedbal = parseFloat(amt) - parseFloat(unpay);
            payedbal = parseFloat(payedbal).toFixed(2);
            return payedbal;
        },
        //获取分期到期日，只有分期类型为W按日贷才有到期日
        getMPduedate(value) {
            value = (`${value}`).trim();
            if (value) {
                return moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
            } else {
                return '';
            }
        },
    },
    async mounted() {
        this.mptypeList = await getDictSelectList('MP_TYPE', this);
        this.mpstatusList = await getDictSelectList('MP_STATUS', this);
        this.opercodeList = await getDictSelectList('MPTRANS_TYPE', this);
        this.mpMonthList = await getDictSelectList('MPMONTH', this);
        this.mprateList = await getDictSelectList('MP_RATE', this);
        this.init();
        this.changeCardList(this.cardInfo_3004.CATEGORY + '');
    },
    methods: {
        Fun(row, column, cell) {
            console.log('row', row);
            console.log('column', column);
            console.log('cell', cell);
        },
        init() {
            console.log("默认账户类别：" + this.cardInfo_3004.CATEGORY);
            console.log("默认账户：" + this.cardInfo_3004.CARDNO);
            this.searchForm.accttype = this.cardInfo_3004.CATEGORY + '';

            //this.searchForm.cardno = this.cardInfo_3004.CARDNO;
        },
        changeCardList(val) {
            console.log("当前账户类型：" + val);
            let hasDefault = false; //是否包含默认卡
            this.cardList = [];
            this.cardList_3601.forEach((item) => {
                if (item.CATEGORY + '' === val) {
                    this.cardList.push(item);
                    if (item.CARDNBR === this.cardInfo_3004.CARDNO) {
                        hasDefault = true;
                    }
                }
            });

            //包含默认卡，卡号显示默认卡，不包含，显示cardList里第一张卡号
            if (hasDefault) {
                this.searchForm.cardno = this.cardInfo_3004.CARDNO;
            } else {
                this.searchForm.cardno = this.cardList[0].CARDNBR;
            }


        },
        // 点击查询 获取初始化列表数据
        async handleGetListData(type) {

            // this.$refs.searchForm.validate((valid) => {
            // if (valid) {
            this.pageLoading = true;
            // 设置请求参数 -- 3037 交易
            let NEXTDAY = this.searchForm.startDate;
            let NEXTMPNO = 0;
            if (type != 'first') {
                if (this.pagingDataList.length) { // 判断翻页上传字段取值
                    NEXTDAY = this.pagingDataList[this.currentPageIndex].NEXTDAY;
                    NEXTMPNO = this.pagingDataList[this.currentPageIndex].NEXTMPNO;
                }
            } else {
                this.currentPageIndex = 0;
                this.pagingDataList = [];
                this.showremainListTable = false;
                this.remainData = [];
            }

            const appBody = {
                OPT: 1, // 查询方式 1-用卡号查询 2-用证件号码查询
                CARDNBR: this.searchForm.cardno, // 卡号
                MPTYPE: this.searchForm.mpType, // 分期类型
                OPERCODE: this.searchForm.opercode,//操作代码，0-全部返回，1-可提前还款的分期交易，2-可撤销的分期交易
                PINFLAG: this.pinFlag, // 是否检查密码标志 0-不检查
                BEGDAY: this.searchForm.startDate, // 起始日期 YYYYMMDD
                ENDDAY: this.searchForm.endDate, // 终止日期
                RTNIND: this.pagingDataList.length === 0 ? '' : 1, // 翻页标志 首次传空， 翻页传1
                NEXTDAY, // 首次查询时送查询起始日期， 下翻页查询时上送上次查询结果的最后一条记录返回的分期付款交易日期
                NEXTMPNO, // 首次查询时送起始序号，默认为0 下翻页查询时上送上次查询结果的最后一条记录返回的交易序号
            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            // console.log(this.defaultParams, 'this.defaultParams')
            params.body.appHead.tranCode = '3077';
            params.body.appBody = appBody;

            // 跑 3077 交易
            await this.$post.common.transPort(params).then(async (res) => {
                this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, '响应数据 -- 3077');
                    let itemList = [];
                    if (result.sysHead.rspCd === '000000') {
                        this.showremainListTable = false;//查询默认不显示汇总信息
                        let tipNum = 0;
                        const dateList = result.body.appBody.dataList;
                        if (dateList.length > 0) {

                            for (let i = 0; i < dateList.length; i++) {
                                if (dateList[i].MPTYPE === 'W') {
                                    await this.mptypeValue(dateList[i].CARDNBR, dateList[i].MPNO, dateList[i].APPREF).then((items) => {
                                        dateList[i].DUEDATE = items;
                                    });
                                    if (!this.ifFinishtot) {//未完成汇总计算，继续计算
                                        this.dayremainamttotal = parseFloat(this.dayremainamttotal) + parseFloat(dateList[i].REMPBAL);
                                        this.dayremainfeetotal = parseFloat(this.dayremainfeetotal) + parseFloat(dateList[i].REMFEE);
                                    }
                                } else {

                                    dateList[i].DUEDATE = '';
                                    if (!this.ifFinishtot) {//未完成汇总计算，继续计算
                                        this.othremainamttotal = parseFloat(this.othremainamttotal) + parseFloat(dateList[i].REMPBAL);
                                        this.othremainfeetotal = parseFloat(this.othremainfeetotal) + parseFloat(dateList[i].REMFEE);
                                    }
                                }
                                itemList.push(dateList[i]);
                            }



                            // datalist = result.body.appBody.dataList || [];
                            this.tableData = itemList;



                            const currentPagingData = {
                                NEXTDAY: result.body.appBody.dataList[result.body.appBody.dataList.length - 1].BEGYM,
                                NEXTMPNO: result.body.appBody.dataList[result.body.appBody.dataList.length - 1].MPNO,
                            };
                            this.nextButtonFlag = !(result.body.appBody.RTNIND === '0');
                            let flag = false;
                            let currentIndex;
                            this.pagingDataList.forEach((item, index) => { // 判断此次查询数据最后一条记翻页分期付款序号是否在已有列表中
                                if (item.NEXTMPNO === currentPagingData.NEXTMPNO) {
                                    flag = true;
                                    currentIndex = index;
                                }
                            });
                            if (flag) { // 存在
                                this.currentPageIndex = currentIndex;
                            } else {
                                this.pagingDataList.push(currentPagingData);
                                this.currentPageIndex = this.pagingDataList.length - 1;
                            }
                            //if (tipNum === result.body.appBody.dataList.length) {
                            if (result.body.appBody.RTNIND === '0') {
                                let daytotal = parseFloat(this.dayremainamttotal) + parseFloat(this.dayremainfeetotal);
                                let othtotal = parseFloat(this.othremainamttotal) + parseFloat(this.othremainfeetotal);
                                this.remainData = [
                                    {
                                        mptype: '按日分期',
                                        remainamttotal: parseFloat(this.dayremainamttotal).toFixed(2),
                                        remainfeetotal: parseFloat(this.dayremainfeetotal).toFixed(2),
                                        remaintotal: parseFloat(daytotal).toFixed(2)
                                    },
                                    {
                                        mptype: '其他分期',
                                        remainamttotal: parseFloat(this.othremainamttotal).toFixed(2),
                                        remainfeetotal: parseFloat(this.othremainfeetotal).toFixed(2),
                                        remaintotal: parseFloat(othtotal).toFixed(2)
                                    }
                                ];
                                this.showremainListTable = true;//最后一页，显示汇总信息
                                this.ifFinishtot = true;//完成汇总计算
                            }
                        }

                    } else {
                        this.tableData = [];
                        this.currentPageIndex = 0;
                        this.pagingDataList = [];
                        this.nextButtonFlag = false;
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                        this.nextButtonFlag = false;
                    }
                } else {
                    this.$alert('请求失败!', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
            // } else {
            //     this.pageLoading = false;
            // }
            // });
        },
        async handleGetListAll(type) {
            this.pageLoading = true;
            // 设置请求参数 -- 3037 交易
            if (type === 'first') {
                this.pageLoading = true;
                this.RtnindFlag = '';
                this.NEXTDAY = this.searchForm.startDate;
                this.NEXTMPNO = '';
                this.resultlist = [];
                this.remainData = [];
                this.tableData = [];
                this.dayremainamttotal = '0';
                this.dayremainfeetotal = '0';
                this.othremainamttotal = '0';
                this.othremainfeetotal = '0';
            }

            const appBody = {
                OPT: 1, // 查询方式 1-用卡号查询 2-用证件号码查询
                CARDNBR: this.searchForm.cardno, // 卡号
                MPTYPE: this.searchForm.mpType, // 分期类型
                OPERCODE: this.searchForm.opercode,//操作代码，0-全部返回，1-可提前还款的分期交易，2-可撤销的分期交易
                PINFLAG: this.pinFlag, // 是否检查密码标志 0-不检查
                BEGDAY: this.searchForm.startDate, // 起始日期 YYYYMMDD
                ENDDAY: this.searchForm.endDate, // 终止日期
                RTNIND: this.RtnindFlag, // 翻页标志 首次传空， 翻页传1
                NEXTDAY: this.NEXTDAY, // 首次查询时送查询起始日期， 下翻页查询时上送上次查询结果的最后一条记录返回的分期付款交易日期
                NEXTMPNO: this.NEXTMPNO, // 首次查询时送起始序号，默认为0 下翻页查询时上送上次查询结果的最后一条记录返回的交易序号
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3077';
            defaultParams.body.appBody = appBody;
            // 3077交易

            await this.$post.common.transPort(defaultParams).then(async (res) => {
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') {
                        this.resultlist.push(...result.body.appBody.dataList);
                        this.RtnindFlag = result.body.appBody.RTNIND;
                        if (result.body.appBody.RTNIND === '1') {
                            this.NEXTDAY = result.body.appBody.dataList[result.body.appBody.dataList.length - 1].BEGYM;
                            this.NEXTMPNO = result.body.appBody.dataList[result.body.appBody.dataList.length - 1].MPNO;
                            // 修改翻页标志 
                            //this.RtnindFlag = result.body.appBody.RTNIND;
                            this.handleGetListAll();

                        } else {

                            console.log('this.InstallmentInfo_3077', this.resultlist);
                            //this.tableData = this.resultlist;
                            let itemList = [];
                            for (let i = 0; i < this.resultlist.length; i++) {
                                if (this.resultlist[i].MPTYPE === 'W') {
                                    await this.mptypeValue(this.resultlist[i].CARDNBR, this.resultlist[i].MPNO, this.resultlist[i].APPREF).then((items) => {
                                        this.resultlist[i].DUEDATE = items;
                                    });
                                    //按日分期汇总计算
                                    this.dayremainamttotal = parseFloat(this.dayremainamttotal) + parseFloat(this.resultlist[i].REMPBAL);
                                    this.dayremainfeetotal = parseFloat(this.dayremainfeetotal) + parseFloat(this.resultlist[i].REMFEE);
                                    itemList.push(this.resultlist[i]);
                                } else {
                                    this.resultlist[i].DUEDATE = '';
                                    //转账分期汇总计算
                                    if (this.resultlist[i].STATUS) {

                                    }
                                    this.othremainamttotal = parseFloat(this.othremainamttotal) + parseFloat(this.resultlist[i].REMPBAL);
                                    this.othremainfeetotal = parseFloat(this.othremainfeetotal) + parseFloat(this.resultlist[i].REMFEE);
                                    itemList.push(this.resultlist[i]);
                                }
                            }

                            let daytotal = parseFloat(this.dayremainamttotal) + parseFloat(this.dayremainfeetotal);
                            let othtotal = parseFloat(this.othremainamttotal) + parseFloat(this.othremainfeetotal);
                            this.remainData = [
                                {
                                    mptype: '按日分期',
                                    remainamttotal: parseFloat(this.dayremainamttotal).toFixed(2),
                                    remainfeetotal: parseFloat(this.dayremainfeetotal).toFixed(2),
                                    remaintotal: parseFloat(daytotal).toFixed(2)
                                },
                                {
                                    mptype: '其他分期',
                                    remainamttotal: parseFloat(this.othremainamttotal).toFixed(2),
                                    remainfeetotal: parseFloat(this.othremainfeetotal).toFixed(2),
                                    remaintotal: parseFloat(othtotal).toFixed(2)
                                }
                            ];
                            console.log("remainData：", this.remainData);
                            this.pageLoading = false;
                            this.isShowView = true;
                            this.tableData = itemList;
                            // this.$store.commit('common/UPDATE_CARD_INSTALLMENT_INFO', this.InstallmentInfo_3077);
                        }
                    } else {
                        this.pageLoading = false;
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, result.sysHead.rspDesc, {
                            customClass: 'error', type: 'error',
                        });
                        this.isShowView = true;
                    }
                } else {
                    this.pageLoading = false;
                    this.$alert('请求失败', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },
        // 
        async mptypeValue(cardno, mpno, appref) {
            let rs = '';
            const appBody = {
                CARDNBR: cardno, // 卡号
                MPNBR: mpno, // 分期付款序号
                APPREF: appref,//分期付款申请编号
                PINFLAG: '0', // 是否检查密码标志 0-不检查

            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            // console.log(this.defaultParams, 'this.defaultParams')
            params.body.appHead.tranCode = '3105';
            params.body.appBody = appBody;

            // 跑 3105 交易查询按日分期付款明细
            await this.$post.common.transPort(params).then((res) => {
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, '响应数据 -- 3105');
                    if (result.sysHead.rspCd === '000000') {
                        rs = result.body.appBody.LOANDATE;
                    }
                }
            });
            return rs;
        },
        // 点击重置搜索表单
        handleReset() {
            this.$refs.searchForm.resetFields();
            // 清空当前选择行数据
            this.currentRowData = '';
            // 清空缓存翻页数据
            this.pagingDataList = [];
            // this.handleGetListData()
        },

        handleChange(row) {
            // console.log(this.$refs[row.MPNO], 'this.$refs[row.MPNO]')
            // this.$refs[row.MPNO].getElementsByTagName('input').blur()

            this.handleSelectRow(row);
        },

        // 选择表格行
        handleSelectRow(row) {
            // console.log(row, '第' + row.MPNO + '行数据')
            // if (row.MPNO === this.currentSelectRow) {
            //     this.currentSelectRow = ''
            //     this.currentRowData = ''
            // } else {
            // }
            this.currentSelectRow = row.MPNO;
            this.currentRowData = row;
        },

        // 上下页切换
        handleChangePage(type) {
            // 翻页之前先清空 当前选择行数据
            this.currentRowData = '';
            if (type === 'pre') { // 切换到上一页
                if (this.currentPageIndex - 2 < 0) {
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                } else {
                    this.currentPageIndex = this.currentPageIndex - 2;
                }
                this.handleGetListData(type);
            } else { // 切换到下一页
                this.handleGetListData(type);
            }
        },
        repay(mptype) {
            if (mptype === 'W') {//跳转到按日分期提前还款页面
                this.$router.push({
                    path: '/carPeriodic/dayloanprepayment',
                });
            } else {//跳转到转账分期提前还款页面
                this.$router.push({
                    path: '/carPeriodic/prepayment',
                });
            }

        },

        // 关闭对话框
        handleCloseDialog() {
            this.isShowTrialDialog = false;
        },
    },
};
</script>
<style rel="stylesheet/scss" lang="scss">
.mptransqry {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;

    .mine .el-table {
        .el-radio {
            .el-radio__label {
                display: none;
                padding-left: 2px;
            }
        }
    }

    .searchForm {
        .el-form-item__content {
            display: inline-block;

            .el-select,
            .el-date-editor {
                /* max-width: 200px; */
            }
        }
    }
}
</style>
<style scoped lang="scss">
.mptransqry {
    .buttonBox {
        margin: 30px 0;
        text-align: right;
    }

    .footer {
        text-align: center;
        margin-top: 30px;
    }
}

.trialDialog {
    .el-row {
        margin-bottom: 30px;

        .infoItem {
            .title {
                font-weight: 600;
                padding-right: 10px;
            }

            .info {
                color: #999;
            }
        }
    }
}
</style>
